<template>
    <header>
        <div class="background">
            <img :src="seller.avatar" />
        </div>
        <div class="content-wrapper">
            <div class="avatar">
                <img :src="seller.avatar" />
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand bg-image"></span>
                    <span class="name">{{seller.name}}</span>
                </div>
                <div class="description">{{seller.description}}/{{seller.deliveryTime}}分钟送达</div>
                <div v-if="seller.supports" class="support">
                    <ry-class-map :type="seller.supports[0].type"></ry-class-map>
                    <span class="text">{{seller.supports[0].description}}</span>
                </div>
            </div>
            <div v-if="seller.supports" class="support-count" @click="showDetails">
                <span class="count">{{seller.supports.length}}个</span>
                <i class="icon-keyboard_arrow_right"></i>
            </div>
        </div>
        <div class="bulletin-wrapper" @click="showDetails">
            <span class="bulletin-title bulletin-bg"></span>
            <span class="bulletin-text">{{seller.bulletin}}</span>
            <i class="icon-keyboard_arrow_right"></i>
        </div>
        <transition name="details">
            <div v-show="detailsShow" class="details">
                <div class="details-wrapper clearfix">
                    <div class="details-main">
                        <h1 class="name">{{seller.name}}</h1>
                        <div class="star-wrapper">
                            <ry-star :size="48" :score="seller.score"></ry-star>
                        </div>
                        <div class="title">
                            <div class="line line-1px"></div>
                            <div class="text">优惠信息</div>
                            <div class="line line-1px"></div>
                        </div>
                        <ul class="supports">
                            <li v-for="item in seller.supports" class="support-item">
                                <ry-class-map :type="item.type"></ry-class-map>
                                <span class="text">{{item.description}}</span>
                            </li>
                        </ul>
                        <div class="title">
                            <div class="line line-1px"></div>
                            <div class="text">商家公告</div>
                            <div class="line line-1px"></div>
                        </div>
                        <div class="bulletin">
                            <p class="content">{{seller.bulletin}}</p>
                        </div>
                    </div>
                </div>
                <div class="details-close" @click="closeDetails">
                    <i class="icon-close"></i>
                </div>
            </div>
        </transition>
    </header>
</template>

<script>
    import RyClassMap from './../classMap/ClassMap'
    import RyStar from './../star/Star'

    export default {
        name: 'Header',
        props: ['seller'],
        components: {
            RyClassMap,
            RyStar
        },
        data() {
            return {
                detailsShow: false
            }
        },
        methods: {
            showDetails() {
                this.detailsShow = true;
            },
            closeDetails() {
                this.detailsShow = false;
            }
        }
    }
</script>

<style scoped>
    header {
        color: #fff;
        background-size: cover;
        position: relative;
        background-color: rgba(7, 17, 27, .5);
    }

    .background {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        filter: blur(10px);
        z-index: -1;
    }

    .background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-wrapper {
        padding: 24px 12px 18px 24px;
        font-size: 0;
        position: relative;
    }

    .avatar {
        display: inline-block;
        font-size: 14px;
        vertical-align: top;
    }

    .avatar img {
        width: 64px;
        height: 64px;
        border-radius: 2px;
    }

    .content-wrapper .content {
        display: inline-block;
        margin-left: 16px;
        vertical-align: top;
    }

    .content .title {
        margin: 2px 0 8px;
    }

    .brand {
        display: inline-block;
        width: 30px;
        height: 18px;
        vertical-align: top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .bg-image {
        background-image: url('img/brand@2x.png');
    }

    .title .name {
        margin-left: 6px;
        font-size: 16px;
        line-height: 18px;
        font-weight: bold;
    }

    .description {
        margin-bottom: 10px;
        line-height: 12px;
        font-size: 12px;
    }

    .support .text {
        line-height: 15px;
        font-size: 10px;
    }

    .support-count {
        position: absolute;
        right: 12px;
        bottom: 14px;
        padding: 5px 8px;
        line-height: normal;
        border-radius: 14px;
        background-color: rgba(0, 0, 0, .2);
        text-align: center;
    }

    .count {
        font-size: 10px;
    }

    .support-count .icon-keyboard_arrow_right {
        font-size: 10px;
        margin-left: 2px;
    }

    .bulletin-wrapper {
        height: 28px;
        line-height: 28px;
        padding: 0 22px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        position: relative;
        background-color: rgba(7, 17, 27, .2);
    }

    .bulletin-title {
        display: inline-block;
        width: 22px;
        height: 12px;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: middle;
        transform: translateY(-1px);
    }

    .bulletin-bg {
        background-image: url('img/bulletin@2x.png');
    }

    .bulletin-text {
        font-size: 10px;
        vertical-align: middle;
    }

    .bulletin-wrapper .icon-keyboard_arrow_right {
        position: absolute;
        font-size: 10px;
        right: 12px;
        top: 8px;
    }

    .details {
        position: fixed;
        color: #fff;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(7, 17, 27, .8);
        z-index: 4;
        overflow: auto;
    }

    .details-enter-active,
    .details-leave-active {
        transition: .5s all;
    }
    
    .details-enter,
    .details-leave-to {
        opacity: 0;
    }
    
    .details-enter-to,
    .details-leave {
        opacity: 1;
    }

    .details-wrapper {
        width: 100%;
        min-height: 100%;
        display: inline-block;
    }

    .details-main {
        margin-top: 64px;
        padding-bottom: 64px;
    }

    .details-close {
        clear: both;
        font-size: 30px;
        height: 30px;
        margin: -64px auto 0;
        position: relative;
        width: 30px;
    }

    .details-main .name {
        line-height: 16px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
    }

    .star-wrapper {
        margin-top: 18px;
        padding: 2px 0;
        text-align: center;
    }

    .details-main .title {
        margin: 28px auto 24px;
        width: 80%;
        display: flex;
    }

    .title .text {
        font-size: 14px;
        font-weight: 700;
        padding: 0 12px;
    }

    .line {
        flex: 1;
        border-bottom: 1px solid hsla(0, 0%, 100%, .2);
    }
    
    .supports,
    .bulletin {
        margin: 0 auto;
        width: 80%;
    }

    .support-item {
        display: flex;
        margin-bottom: 12px;
        padding: 0 12px;
        align-items: center;
    }

    .support-icon {
        margin-right: 6px;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: cover;
        display: inline-block;
    }

    .support-item .text {
        font-size: 12px;
    }
    
    .bulletin .content {
        font-size: 12px;
        line-height: 24px;
        padding: 0 12px;
    }

    @media (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3){
        .bg-image {
            background-image: url('img/brand@3x.png');
        }
        
        .bulletin-bg {
            background-image: url('img/bulletin@3x.png');
        }
    }

    @media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5){
        .line-1px {
            transform: translateY(-6.5px) scaleY(.7);
        }
    }

    @media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2){
        .line-1px {
            transform: translateY(-6.5px) scaleY(.5);
        }
    }
</style>